<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>点击我清楚定时器</button>
    <script>
        // 定时器 ：
        // 一.倒计时定时器 ：多指定时间之后执行代码块的定时器 
        // (1)第一个参数是需要倒计时执行的函数 。 （2）第二个参数是倒计时的时间 ，单位是毫秒

        // 开启一个倒计时定时器 
        // function fn() {
        //     console.log("hello")
        // }
        // let timer = setTimeout(fn, 2000);

        // // 可以关闭倒计时定时器  :
        // // （1）获取button按钮 
        // let btn = document.querySelector("button");
        // // console.log(btn);
        // // (2) 给按钮绑定点击事件，点击按钮之后执行函数
        // btn.onclick = function(){
        //     console.log("onclick")
        //     clearTimeout(timer)
        // }


        // 二、间隔定时器 ： 间隔一段指定时间执行代码块
    //     let count = 0;
    //    let timer =  setInterval(function(){
    //         count++;
    //         console.log("间隔定时器需要执行的内容",count);
    //     }, 2000);
    //     // let timer2 =  setInterval(function(){
    //     //     count++;
    //     //     console.log("间隔定时器需要执行的内容",count);
    //     // }, 2000);
    //     // console.log(timer);

    //     // 关闭间隔定时器 ；
    //     let btn = document.querySelector("button");
    //     btn.onclick = function(){
    //         console.log("定时器关闭了");
    //         clearInterval(timer);
    //     }



    // 三、利用倒计时定时器模拟间隔定时器 
    // 递归函数 ： 自身调用自身 ；

    // function fn(){
    //     setTimeout(() => {
    //         console.log("倒计时定时器执行了");
    //         fn();
    //     }, 2000);
    // }
    // fn();


    /* 
    一、倒计时定时器 
        1. 开启倒计时定时器 let timer =  setTimeout(回调函数：callback，定时的时间单位是毫秒)
            关闭定时器  clearTimeout（定时器的返还值:timer）
        2.开始间隔定时器 ： let timer = setInterval(回调函数,间隔时间)  
            关闭定时器： clearInterval(定时器的返还值);
    
    
   练习：1 利用定时器 让时间动起来；
        2.如何实现一个中文时间

    
    */


       






    </script>
</body>

</html>